<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zzy-chatroom</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="main">
    <div class="top">
        <div class="top-left">
            <div class="header" ><h2 id="user" th:text="${user.username}"></h2></div>
            <div class="search">
                <input type="text">
                <i class="icon-sear"></i>
            </div>
        </div>
        <div class="top-type">
            <a href="#" class="news icon-site"></a>
            <a href="#" class="friend icon-site"></a>
            <a href="#" class="file icon-site"></a>
        </div>
        <div class="top-right">
            <i class="ic-menu ic-same"></i>
            <i class="ic-shrink ic-same"></i>
            <i class="ic-boost ic-same"></i>
            <i class="ic-close ic-same"></i>
        </div>
    </div>
    <div class="box">
        <div class="chat-list">
            <div class="list-box">
                <div class="chat-rig" th:each="item:${userFriends}">
                    <p class="title" th:data-friend ="${item.username}"  th:text="${item.username}" th:onclick="'javascript:getMess('+${item.getUId()}+')'">公众号</p>
                    <p class="text" th:if="${item.getIsLogin() == 1}">在线</p>
                    <p class="text" th:if="${item.getIsLogin() != 1}">下线</p>
                </div>
            </div>
        </div>
        <div class="box-right">
            <div class="recvfrom">
                <div class="nav-top">
                    <p id="friend">公众号</p>
                </div>
                <div class="news-top">
                    <ul id="chat">

                    </ul>
                </div>
            </div>
            <div class="sendto">
                <div class="but-nav">
                    <ul>
                        <li class="font"></li>
                        <li class="face"></li>
                        <li class="cut"></li>
                        <li class="page"></li>
                        <li class="old"></li>
                    </ul>
                </div>
                <div class="but-text">
                    <textarea name="" id="message" cols="110" rows="6"></textarea>
                    <a href="#" id="send" class="button">发送</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var data = document.querySelector('#message')
    var send = document.querySelector('#send')
    send.addEventListener('click',sendMessage)

    var chat = document.querySelector('#chat')
    var user = document.querySelector('#user')
    var name = user.innerText
    var friendName = ''
    let message = ''

    function getMess(fId){
        //todo 获取聊天对象姓名
        var evt = window.event || arguments[0];
        friendName = evt.target.dataset.friend
        axios.get(`http://localhost:8080/getMessByFId/${fId}`).then(
            res =>{
                let data = res.data
                message = ''
                for (let item of data) {
                    message += `<li class=${item.username == name ? "self" : "other" }>
                            <div class="msg">
                                <p class="msg-name">${item.username}</p>
                                <p class="msg-text">${item.data} <emoji class="pizza"></emoji></p>
                                <time>${item.sendTime}</time>
                            </div>
                        </li>`
                }
                chat.innerHTML = message

            }
        )
    }

    var ws = new WebSocket("ws://localhost:8080/chat")
    ws.onopen = function (){
        console.log('ws服务已连接')
    }
    ws.onmessage = function (event){
        let da = JSON.parse(event.data)
        message += `<li class="${da.username == name ? "self" : "other" }">
                            <div class="msg">
                                <p class="msg-name">${da.username}</p>
                                <p class="msg-text">${da.data} <emoji class="pizza"></emoji></p>
                                <time>${da.sendTime}</time>
                            </div>
                        </li>`

        chat.innerHTML = message
    }
    ws.onclose = function (){
        console.log('服务断开')
    }
    function sendMessage(){
        let mess = data.value
        message += `<li class="self">
                            <div class="msg">
                                <p class="msg-name">${name}</p>
                                <p class="msg-text">${mess} <emoji class="pizza"></emoji></p>
                                <time>${new Date()}</time>
                            </div>
                        </li>`

        chat.innerHTML = message
        let m = {
            name:name,
            friendName:friendName,
            mess:mess
        }
        let result = JSON.stringify(m)
        ws.send(result)
        data.value = ''
    }

</script>
 
</body>
</html>